import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core'
import { Location } from '@angular/common'
import { ActivatedRoute, Router } from '@angular/router'
import { NzModalService, NzMessageService } from 'ng-zorro-antd'

import { PageService } from '@shared/services/page.service'
import { ETabScrollStatus, EPaymentBrand } from '@shared/enums'
import { CommonAcquirerService } from '@shared/services/acquirer.service'
import { DetailTabClass } from '@shared/classes/DetailTabClass'
import {
  Common,
  ICardChannel,
  IChannelInfo,
  Acquirer,
  CardChannel,
  ICardChannelVisa,
  ICardChannelMasterCard,
  ICardChannelAmericanExpress,
  ICardChannelUpiExpress,
} from '@shared/interfaces/acquirer'
import { I18NService } from '@core'
import { AcquirerService } from '../../acquirer.service'
import { CardChannelDetailHelperService } from './helper.service'
import { ECategoryUrl } from '@shared/interfaces/trade'
import { channelSorter } from 'app/utils/helpers'

@Component({
  selector: 'app-acquirer-detail-tab-channel-card',
  templateUrl: './tab-channel-card.component.html',
})
export class AcquirerDetailTabChannelCardComponent extends DetailTabClass<Common> implements OnInit {
  @ViewChild('cardOperate') cardOperate: TemplateRef<void>
  @ViewChild('tpCurrency') tpCurrency: TemplateRef<any>

  acquirer: Acquirer

  channelInfos: IChannelInfo[] = []

  fields = {
    ChannelCard: '1',
  }

  constructor(
    public modelService: NzModalService,
    public msg: NzMessageService,
    public location: Location,
    public pageService: PageService,
    public route: ActivatedRoute,
    public router: Router,
    private acquirerService: AcquirerService,
    private commonAcquirerService: CommonAcquirerService,
    private i18n: I18NService,
    private helperService: CardChannelDetailHelperService,
  ) {
    super(pageService, route)
  }

  ngOnInit() {
    this.initialData()
  }

  goDelete(index: number): void {
    this.modelService.confirm({
      nzTitle: this.trans('GENERAL.NOTIFICATION.WARNING'),
      nzContent: this.trans('BIZ.ACQUIRER.OTHER.QR_CHANNEL.DELETE_CHANNEL_CONFIRM'),
      nzOnOk: () => this.deleteChannel(index),
    })
  }

  deleteChannel(index: number): void {
    const insCode = this.acquirer.institution.common.insCode
    const channelId = this.acquirer.cardChannels[index].id
    this.acquirerService.deleteChannelForAcquirer(ECategoryUrl.card, insCode, channelId).subscribe(isSuccess => {
      if (isSuccess) {
        this.msg.info(this.trans('GENERAL.NOTIFICATION.DELETE_SUCCESS'))
        this.acquirer.cardChannels = this.acquirer.cardChannels.filter(c => c.id !== channelId)
        this.commonAcquirerService.setViewingAcquirer(this.acquirer)
      }
    })
  }

  goAddChannel(): void {
    this.router.navigate(['../../card/add'], { relativeTo: this.route })
  }

  initialData() {
    this.commonAcquirerService.viewAcquirer$.value$.subscribe(acquirer => {
      const { cardChannels } = acquirer
      this.acquirer = acquirer
      this.initCardColumns(cardChannels)
    })
    this.pageService.setTabScrollStatus(ETabScrollStatus.Scroll)
  }

  initCardColumns(cardChannels: ICardChannel[]): void {
    this.channelInfos = []
    cardChannels
      .sort((a: CardChannel, b: CardChannel) => channelSorter(a, b))
      .forEach(channel => {
        switch (channel.chanCode) {
          case 'VIS':
            this.initVISColumns(channel as ICardChannelVisa)
            break
          case 'MCC':
            this.initMCCColumns(channel as ICardChannelMasterCard)
            break
          case EPaymentBrand.AME:
            this.initAMEColumns(channel as ICardChannelAmericanExpress)
            break
          case EPaymentBrand.UPI:
            this.initUPIColumns(channel as ICardChannelUpiExpress)
            break
        }
      })
  }

  initVISColumns(channel: ICardChannelVisa): void {
    this.channelInfos.push({
      imgUrl: 'assets/images/centaur/logo/Visa-logo.svg',
      channelColumns: this.helperService.getVISChannelColumns(channel),
    })
  }

  initMCCColumns(channel: ICardChannelMasterCard): void {
    this.channelInfos.push({
      imgUrl: 'assets/images/centaur/logo/Mcc-logo.svg',
      channelColumns: this.helperService.getMCCChannelColumns(channel),
    })
  }

  initAMEColumns(channel: ICardChannelAmericanExpress): void {
    this.channelInfos.push({
      imgUrl: 'assets/images/centaur/logo/Ame-logo.png',
      channelColumns: this.helperService.getAMEChannelColumns(channel),
    })
  }

  initUPIColumns(channel: ICardChannelUpiExpress): void {
    this.channelInfos.push({
      imgUrl: 'assets/images/centaur/logo/upi-logo.png',
      channelColumns: this.helperService.getUPIChannelColumns(channel),
    })
  }

  parseCurValue(currencies: Array<any>): string {
    return currencies.map(c => c.code).join(',')
  }

  // abstract methods
  onCancel() {}

  onSubmit() {
    const columns = this.columns[this.field][this.rowIndex]
  }

  initialColumns() {}

  trans(key: string, params?: Object): string {
    return this.i18n.fanyi(key, params)
  }
}
